<template>
  <div class="activityView">
    <div class="shurukuang">
      <input
        type="text"
        class="input"
        placeholder="请输入活动名称"
        v-model="huodongmingcheng"
      />
      <div class="caxun" @click="caxun">查询</div>
      <div class="chongzhi" @click="chongzhi">重置</div>
    </div>
    <div class="xiansuo">
      <router-link to="/tianjiahuodong">
        <el-button size="small" class="a tianjia">添加活动</el-button>
      </router-link>
      <span class="shu"></span>
      <el-button
        class="a shanchu"
        size="small"
        type="yangshi"
        @click="batchDelete"
        >批量删除</el-button
      >
    </div>
    <div class="xianshuo-list">
      <el-table
        :cell-style="setCellColor"
        size="medium"
        ref="multipleTable"
        :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ color: '#000', background: '#fafafa' }"
      >
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column
          label="活动名称"
          width="175"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ scope.row.name }} </template>
        </el-table-column>
        <el-table-column
          label="活动有效期"
          width="175"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope"
            >{{ scope.row.huodongyouxiaoqi }}
          </template>
        </el-table-column>
        <el-table-column label="活动状态" width="175" show-overflow-tooltip>
          <template slot-scope="scope"
            >{{ scope.row.qiyong ? "禁用" : "启用" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chuangjianshijian"
          label="创建时间"
          width="175"
          show-overflow-tooltip
        >
          <template slot-scope="scope"
            >{{ scope.row.chuangjianshijian }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chaungjianren"
          label="创建人"
          width="175"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.chaungjianren }} </template>
        </el-table-column>
        <el-table-column
          prop="guanlianqudao"
          label="关联渠道"
          width="175"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.guanlianqudao.join(',') }} </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="handleEdit(scope.row.id, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="handleFenPei(scope.row.id, scope.row)"
              >{{ !scope.row.qiyong ? "禁用" : "启用" }}</el-button
            >
            <el-button type="text" size="medium"
              ><el-button type="text" @click="open(scope.row.id)"
                >删除</el-button
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenyieqi">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currpage"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="pagesize"
        :background="true"
        :pager-count="pagesize"
        layout="->, prev, pager, next,sizes, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTableData, deleteTableData } from "@/api/index";
import axios from "axios";
export default {
  name: "activityView",
  data() {
    return {
      Visiable: false,
      value: ["请选则线索分配"],
      options: [
        {
          value: "xuanzhe",
          label: "选择",
        },
      ],
      tableData: [],
      currentPage1: 1,
      pagesize: 5,
      currpage: 1,
      multipleSelection: [],
      huodongmingcheng: "",
      
    };
  },
  methods: {
    tanchuang(data) {
      this.Visiable = true;
      this.$nextTick(() => {
        this.$refs.dialog.init(data);
      });
    },
    handleChange(value) {
      console.log(value);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查询
    caxun() {
      axios({
        type: "get",
        url: `http://localhost:3000/tableData?name=${this.huodongmingcheng}`,
      }).then((item) => {
        // console.log(item.data);
        this.tableData = item.data;
      });
    },
    // 重置
    chongzhi() {
      this.huodongmingcheng = "";
      getTableData().then((item) => {
        this.tableData = item.data;
        // console.log(item);
      });
    },
    // 编辑
    handleEdit(id, row) {
      console.log(id, row);
      this.$router.push(`/huodongbianji?id=${id}`);
      getTableData();
    },
    // 禁用
    handleFenPei(index, row) {
      console.log(index, row);
      row.qiyong = !row.qiyong;
    },
    // 批量删除
    batchDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.multipleSelection.forEach((item) => {
            // console.log(item);
            deleteTableData(item.id);
              this.tableData = this.tableData.filter((i) => {
                return i.id != item.id;
              });
          });
          // getTableData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 单个删除
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id),
          deleteTableData(id);
          setTimeout(() => {
            getTableData().then((i) => {
              // console.log(i);
              this.tableData = i.data;
            });
          }, 10);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currpage = val;
    },
    setCellColor({ columnIndex }) {
      if (columnIndex === 1) {
        return "color:#239ce6;";
      }
    },
  },
  mounted() {
    setTimeout(() => {
      getTableData().then((item) => {
        this.tableData = item.data;
        // console.log(item);
      });
     
    },100);
   

    

    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳至";
  },
};
</script>

<style lang="less" scoped>
.activityView {
  width: 90%;
  margin: auto;
  padding: 30px;
  padding-right: 50px;
  background-color: #fff;
  line-height: 0;
}

.shurukuang {
  display: flex;
  /* justify-items: center; */
  /* align-content: center; */
  align-items: center;
}

.input {
  width: 200px;
  height: 40px;
  border: 1px #dcdfe6 solid;
  /* padding: 3px; */
  box-sizing: border-box;
  padding: 0 15px;
  margin-right: 20px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  /* outline: none; */
  outline-color: #409eff;
}

.input::-webkit-input-placeholder {
  color: #c0c4cc;
}

.caxun,
.chongzhi {
  width: 100px;
  height: 40px;
  background-color: #409eff;
  border-radius: 4px;
  margin-left: 20px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}

.chongzhi {
  background-color: #fff;
  color: #000;
  border: #999 solid 1px;
  box-sizing: border-box;
}

// 添加活动
.xiansuo {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
}

.a {
  font-size: 18px;
  color: #409eff;
  border: none;
}

.shu {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: #409eff;
}

.el-button--yangshi {
  border: none;
  color: #409eff;
}

/* 分页器 */
.fenyieqi {
  margin-top: 50px;
}

.xiugaibianji {
  outline: none;
  width: 100px;
  height: 20px;
  border: 1px #999 solid;
}
</style>